<template>
  <div class="btn_warp" style="height:32px;width: 100%;padding-top: 5px;padding-bottom: 10px">
    <el-button type="success" plain class="btn_add" style="width:100px" @click="onAddItem">添加</el-button>
    <el-button type="danger" plain class="btn_delete" style="width: 100px" @click="onDeleteItem">删除</el-button>
    <el-button type="success" style="float: right;margin-right: 30px" @click.prevent="handleSearch">查询</el-button>
    <el-button type="success" style="float: right;margin-right: 5px" @click.prevent="handleClean">全部清空</el-button>
    <el-input v-model="search2" clearable placeholder="按房产地址查询" style="float: right;width: 250px;margin-right: 15px"/>
    <el-input v-model="search1" clearable placeholder="按日期查询" style="float: right;width: 250px;margin-right: 15px"/>
  </div>
  <el-table @selection-change="handleSelsChange" :data="filterTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe border style="width: 1185px;margin: 0 auto" max-height="472" height="472" :cell-style="{ textAlign: 'center' }">
    <el-table-column type="selection" width="40" >
    </el-table-column>
    <el-table-column fixed prop="" label="序号" width="70" :show-overflow-tooltip="true">
      <template #default="scope">
        {{scope.$index+1}}
      </template>
    </el-table-column>
    <el-table-column fixed prop="waterfeeDate" label="日期" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-date-picker value-format="YYYY-MM" size="small" style="width: 120px ;" v-model="scope.row.waterfeeDate" type="month" placeholder="选择一个日期"></el-date-picker>
            </span>
        <span v-else>{{ scope.row.waterfeeDate }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="propertyAddress" label="房产地址" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px" class="table-input" v-model="scope.row.propertyAddress" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.propertyAddress }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeTotalfee" label="应付金额(元)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input-number :precision="2" input-style="height:23px;" :min="0" :max="100000" size="small" controls-position="right" class="table-input" v-model="scope.row.waterfeeTotalfee"/>
            </span>
        <span v-else>{{ scope.row.waterfeeTotalfee }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeLreading" label="上次读数(吨)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input-number input-style="height:23px;" :min="0" :max="100000" size="small" controls-position="right" class="table-input" v-model="scope.row.waterfeeLreading"/>
            </span>
        <span v-else>{{ scope.row.waterfeeLreading }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeTreading" label="本次读数(吨)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input-number input-style="height:23px;" :min="0" :max="100000" size="small" controls-position="right" class="table-input" v-model="scope.row.waterfeeTreading"/>
            </span>
        <span v-else>{{ scope.row.waterfeeTreading }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeeAmount" label="总用量(吨)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input-number input-style="height:23px;" :min="0" :max="100000" size="small" controls-position="right" class="table-input" v-model="scope.row.waterfeeAmount"/>
            </span>
        <span v-else>{{ scope.row.waterfeeAmount }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="waterfeePrice" label="单价(元)" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input-number :precision="2" input-style="height:23px;" :min="0" :max="50" size="small" controls-position="right" class="table-input" v-model="scope.row.waterfeePrice"/>
            </span>
        <span v-else>{{ scope.row.waterfeePrice }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="265" :show-overflow-tooltip="true">
      <template #default="scope">
        <el-button type="warning" round size="small" @click.prevent="updateRow(scope.$index)">修改</el-button>
        <el-button type="primary" round size="small" @click.prevent="saveRow(scope.$index,scope.row.waterfeeId)">保存</el-button>
        <el-button type="danger" round size="small" @click.prevent="deleteRow(scope.row.waterfeeId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page_warp">
    <el-pagination  background @current-change="handleCurrentChange" v-model:page-size="pageSize" v-model:current-page="currentPage" layout="prev, pager, next , jumper" :total="filterTableData.length"></el-pagination>
  </div>
</template>

<script>
  import { ElMessage,ElMessageBox } from 'element-plus'
  import {ref, onMounted} from 'vue'
  import {nanoid} from 'nanoid'
  import axios from "axios"
  import {useRouter} from 'vue-router'
  export default {
    name: "HouseHold",
    setup(){
      const tableSels=ref([])
      const tableData = ref([])
      const pageSize=ref(10)
      const currentPage=ref(1)
      const router=useRouter()
      const search1=ref('')
      const search2=ref('')
      //条件过滤
      let filterTableData =ref([])

      //按条件进行查询
      function handleSearch(){
        filterTableData.value=tableData.value.filter(
            (data) => data.waterfeeDate.toLowerCase().includes(search1.value.toLowerCase()) //匹配日期
                && data.propertyAddress.toLowerCase().includes(search2.value.toLowerCase()) //匹配房产地址
        )
      }
      //清空查询条件
      function handleClean(){
        search1.value=''
        search2.value=''
      }
      //选择添加事件
      function onAddItem(){
        tableData.value.push({
          waterfeeId:nanoid(),   //水费id
          waterfeeLreading: 0,  //上次读数
          waterfeeTreading: 0,  //本次读数
          waterfeeAmount: 0,  //总用量
          waterfeePrice: 2,  //单价
          waterfeeTotalfee: 0,  //应付金额
          waterfeeDate: formatDate(new Date()),  //日期
          waterfeeForeignkey:'',   //房产id
          propertyAddress: '',  //房产地址
          isUpdate:true,    //是否为编辑状态
          isAdd:true,    //是否为新增状态
        },)
        currentPage.value=Math.ceil(tableData.value.length/pageSize.value)
      }
      //选择删除事件
      function onDeleteItem(){
        ElMessageBox.confirm('确认删除此记录吗？', '警告', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}).then(() => {
          tableSels.value.forEach((tableSel)=>{
            tableData.value.forEach((item,index)=>{
              if(item===tableSel){
                tableData.value.splice(index,1)
                //发送请求进行数据删除
                axios.get('http://localhost:8085/deleteWaterfee',{
                  params:{
                    waterfeeId:item.waterfeeId,   //水费id
                  }
                }).then(
                    ()=>{
                      ElMessage({type:'success',message:'删除成功！'})
                    },
                    ()=>{
                      ElMessage({type:'error',message:'删除失败！'})
                      setTimeout(()=>{
                        router.go(0)
                      },500)
                    }
                )
              }
            })
          })
        }).catch(() => {
          ElMessage({type: 'info', message: '删除失败！',})
        })
      }
      //行修改事件
      function updateRow(index) {
        filterTableData.value[pageSize.value * (currentPage.value - 1) + index].isUpdate = true
      }
      //行保存事件
      function saveRow(index){
        let waterFeeObj=filterTableData.value[pageSize.value*(currentPage.value-1)+index]
        if(!waterFeeObj.isUpdate){
          ElMessage({message:'没有数据需要保存！'})
        }else if(waterFeeObj.waterfeeDate === ''){  //判断
          ElMessage({message:'日期不能为空！'})
        }else if(waterFeeObj.waterfeeTotalfee === ''){
          ElMessage({message:'金额不能为空！'})
        }else if(waterFeeObj.propertyAddress === ''){
          ElMessage({message:'房产地址不能为空！'})
        }else if(waterFeeObj.isAdd){
          if(isRepeat(waterFeeObj,index)) return
          //1.发送请求判断物业地址是否存在
          axios.get('http://localhost:8085/hasPropertyAddress',{
            params:{
              propertyAddress:waterFeeObj.propertyAddress,   //投诉对象
            }
          }).then(
              (resp)=>{
                if(resp.data){
                    axios.get('http://localhost:8085/addWaterfee',{
                      params:{
                        waterfeeId:waterFeeObj.waterfeeId,   //水费id
                        waterfeeLreading:waterFeeObj.waterfeeLreading,  //上次读数
                        waterfeeTreading:waterFeeObj.waterfeeTreading,  //本次读数
                        waterfeeAmount:waterFeeObj.waterfeeAmount,  //总用量
                        waterfeePrice:waterFeeObj.waterfeePrice,  //单价
                        waterfeeTotalfee:waterFeeObj.waterfeeTotalfee,  //应付金额
                        waterfeeDate:waterFeeObj.waterfeeDate ,  //日期
                        waterfeeForeignkey:waterFeeObj.waterfeeForeignkey,   //房产id
                        propertyAddress:waterFeeObj.propertyAddress ,  //房产地址
                      }
                    }).then(
                        ()=>{
                          ElMessage({type:'success',message:'保存成功！'})
                          //4.关闭输入框
                          waterFeeObj.isUpdate=false
                          waterFeeObj.isAdd=false
                        },
                        ()=>{
                          ElMessage({type:'error',message:'保存失败！'})
                        }
                    )
                }else {
                  ElMessage({type: 'error',message:'保存错误，房产地址不存在！'})
                }
              },
              ()=>{
                ElMessage({type:'error',message:'网络请求失败！'})
              }
          )
        }else {
          if(isRepeat(waterFeeObj,index)) return
          //1.发送请求判断物业地址是否存在
          axios.get('http://localhost:8085/hasPropertyAddress', {
            params: {
              propertyAddress: waterFeeObj.propertyAddress,   //投诉对象
            }
          }).then(
              (resp) => {
                if (resp.data) {
                  axios.get('http://localhost:8085/updateWaterfee',{
                    params:{
                      waterfeeId:waterFeeObj.waterfeeId,   //水费id
                      waterfeeLreading:waterFeeObj.waterfeeLreading,  //上次读数
                      waterfeeTreading:waterFeeObj.waterfeeTreading,  //本次读数
                      waterfeeAmount:waterFeeObj.waterfeeAmount,  //总用量
                      waterfeePrice:waterFeeObj.waterfeePrice,  //单价
                      waterfeeTotalfee:waterFeeObj.waterfeeTotalfee,  //应付金额
                      waterfeeDate:waterFeeObj.waterfeeDate ,  //日期
                      waterfeeForeignkey:waterFeeObj.waterfeeForeignkey,   //房产id
                      propertyAddress:waterFeeObj.propertyAddress ,  //房产地址
                    }
                  }).then(
                      ()=>{
                        ElMessage({type:'success',message:'保存成功！'})
                        //4.关闭输入框
                        waterFeeObj.isUpdate=false
                        waterFeeObj.isAdd=false
                      },
                      ()=>{
                        ElMessage({type:'error',message:'保存失败！'})
                      }
                  )
                } else {
                  ElMessage({type: 'error', message: '保存错误，房产地址不存在！'})
                }
              },
              () => {
                ElMessage({type: 'error', message: '网络请求失败！'})
              }
          )
        }
      }
      //行删除事件
      function deleteRow(waterfeeId){
        ElMessageBox.confirm('确认删除此记录吗？', '警告', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}).then(() => {
          tableData.value.forEach((item,index)=>{
            if(item.waterfeeId===waterfeeId){
              axios.get('http://localhost:8085/deleteWaterfee',{
                params:{
                  waterfeeId:item.waterfeeId,   //报修id
                }
              }).then(
                  ()=>{
                    ElMessage({type:'success',message:'删除成功！'})
                    tableData.value.splice(index,1)
                  },
                  ()=>{
                    ElMessage({type:'error',message:'删除失败！'})
                  }
              )
            }
          })
        }).catch(() => {
          ElMessage({type: 'info', message: '删除失败！',})
        })
      }
      //分页事件
      function handleCurrentChange(value){
        currentPage.value = value;
      }
      //处理多选
      const handleSelsChange=(sels)=>{
        tableSels.value=sels
      }
      //挂载加载数据
      onMounted(()=>{
        axios.get('http://localhost:8085/getWaterfees').then(
            (response)=>{
              tableData.value=response.data
              filterTableData.value=response.data
            },
            ()=>{
            }
        )
      })
      //判断记录是否重复
      function isRepeat(Obj,index){
        let tip=0
        tableData.value.forEach((item,indexx)=>{
          if(Obj.propertyAddress==item.propertyAddress && Obj.waterfeeDate == item.waterfeeDate && (pageSize.value*(currentPage.value-1)+index)!=indexx){
            tip=1
          }
        })
        if(tip==1){
          ElMessage({type:'error',message:'保存失败,该房产信息记录已存在！'})
          return true
        }else{
          return false
        }
      }
      //自定义生成的时间格式化
      function formatDate(val) {
        if(isNaN(val)) return ''
        const date = new Date(Number(val)); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + "-";
        const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1);
        // const D = date.getDate() + " ";
        // const h = date.getHours() + ":";
        // const m = date.getMinutes() + ":";
        // const s = (date.getSeconds() < 10 ? "0" + (date.getSeconds()) : date.getSeconds());
        return Y + M;
      }

      return{
        tableSels,
        tableData,
        filterTableData,
        search1,
        search2,
        pageSize,
        currentPage,
        onAddItem,
        onDeleteItem,
        updateRow,
        saveRow,
        deleteRow,
        handleCurrentChange,
        handleSelsChange,
        isRepeat,
        formatDate,
        handleSearch,
        handleClean
      }
    }
  }
</script>

<style scoped>
.el-table{
  /*padding: 20px 20px 20px 20px;*/
}
.page_warp{
  width: 600px;
  margin: 5px auto;
  height: 40px;
}
.el-pagination{
  margin-right: 50px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color-base);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-input-number--small{
  width: 100px;
}
</style>